<template>
  <div id="funding">
    <c-title :hide="false" :text="infoData.belongs_to_activity ? `${infoData.current_activity_member.nickname}的${infoData.belongs_to_activity.title}` : infoData.crowdfund_diy_name+'活动'"></c-title>
    <div class="topuser">
      <div class="topuser_left">
        <div class="image">
          <img v-if="infoData.current_activity_member" :src="infoData.current_activity_member.avatar_image" alt="" />
        </div>
        <div class="user">
          <div class="name" v-if="infoData.current_activity_member">{{ infoData.current_activity_member.nickname }}</div>
          <div class="introduce">{{ infoData.initiator_comment }}</div>
        </div>
      </div>
      <div class="topuser_right" @click="posterShowTap">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcrowd_activity_good_icons_share%402x.png" alt="" />
      </div>
    </div>
    <div class="contenbox">
      <swiperImg :info="infoData.belongs_to_activity.images" v-if="infoData.belongs_to_activity"></swiperImg>
      <div class="activityGood" v-if="infoData.belongs_to_activity" @click="toActive">
        <div class="title">
          <span style="color:rgb(265,165,0);">{{ sliceTitleStart }}</span>
          <span>{{ sliceTitleEnd }}</span>
        </div>
        <div class="timeCount" v-if="infoData.belongs_to_activity">
          <!-- 倒计时：10天 12:26:38 -->
          <van-count-down :time="Number(infoData.belongs_to_activity.end_at + '000') - nowtime">
            <template #default="timeData">
              <div class="rightPrice_time">
                <div class="day">剩余{{ timeData.days }}天</div>
                <div class="hour">{{ timeData.hours > 9 ? timeData.hours : "0" + timeData.hours }}</div>
                <div class="mark">:</div>
                <div class="min">{{ timeData.minutes > 9 ? timeData.minutes : "0" + timeData.minutes }}</div>
                <div class="mark">:</div>
                <div class="second">{{ timeData.seconds > 9 ? timeData.seconds : "0" + timeData.seconds }}</div>
              </div>
            </template>
          </van-count-down>
        </div>
        <div class="activityPrice">
          <div class="activityPrice_lis">
            <div class="price">¥{{ infoData.belongs_to_activity.amount }}</div>
            <span>目标金额</span>
          </div>
          <div class="activityPrice_lis">
            <div class="price">¥{{ infoData.preparation_amount }}</div>
            <span>已筹金额</span>
          </div>
          <div class="activityPrice_lis">
            <div class="price">{{ infoData.support_count ? infoData.support_count : 0 }}</div>
            <span>支持人数(名)</span>
          </div>
        </div>
      </div>
      <div class="applyUser" v-if="infoData.joined_member">
        <div class="applyUser_title">报名人员 ({{ infoData.joined_member.length }})</div>
        <div class="userList">
          <div class="lis" v-for="(item, index) in infoData.joined_member.slice(0, 10)" :key="index">
            <img :src="item.avatar_image" alt="" />
            <div class="name">{{ item.nickname }}</div>
          </div>
        </div>
        <div class="showMore" @click="allUserShow = true">全部报名人员<van-icon name="arrow-down" /></div>
      </div>
      <div class="videoDetail" v-if="infoData.belongs_to_activity && infoData.belongs_to_activity.video_url">
        <div class="applyUser_title">视频详情</div>
        <div class="videoHtml">
          <!-- <video :src="infoData.belongs_to_activity.video_url"></video> -->
          <video
            ref="goods_vedio"
            id="goods_vedio"
            style="width: 100%; height: 30vh; object-fit: scale-down;"
            :src="infoData.belongs_to_activity.video_url"
            :poster="infoData.belongs_to_activity.video_cover_url"
            controls
            webkit-playsinline="true"
            playsinline="true"
            x5-playsinline="true"
            x-webkit-airplay="true"
            x5-video-ignore-metadata="true"
            width="100%"
            height="100%"
          >
            <source :src="infoData.belongs_to_activity.video_url" />
          </video>
        </div>
      </div>
      <div class="friendBox" v-if="infoData.has_many_order">
        <div class="applyUser_title">好友支持</div>
        <div class="friend_user" v-for="(item, index) in infoData.has_many_order" :key="index">
          <div class="left">
            <img :src="item.has_pay_member.avatar_image" v-if="item.has_pay_member" alt="" />
          </div>
          <div class="rigth" v-if="item.has_pay_member">
            <div class="right_top">
              <div class="name">{{ item.has_pay_member.nickname }}</div>
              <div class="price">{{ $i18n.t("money") }}{{ item.amount }}</div>
            </div>
            <div class="right_conten" v-if="item.support_comment">{{ item.support_comment }}</div>
            <div class="right_time">{{ item.pay_time }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="btn set-pc-style">
      <div class="homeBtn" @click="toHome">
        <i class="iconfont icon-fontclass-shouye"></i>
        <span>首页</span>
      </div>
      <template v-if="infoData.status == 0">
        <div class="viewbtn" @click="payShowTap" v-if="infoData.is_self">支持自己</div>
        <div class="viewbtn lefsuccess" @click="shareMethods" v-if="infoData.is_self">
          请好友支持
        </div>
        <div class="viewbtn lefsuccess" @click="toActive" v-if="!infoData.is_self">
          我要报名
        </div>
        <div class="viewbtn" @click="payShowTap" v-if="!infoData.is_self">给他支持</div>
      </template>
      <template v-if="infoData.status == 3">
        <div class="finish">活动已结束</div>
      </template>
      <template v-if="infoData.status == 2">
        <div class="failview">
          <div class="left">{{infoData.crowdfund_diy_name}}失败</div>
          <div class="right" @click="toActive">我要报名</div>
        </div>
      </template>
      <template v-if="infoData.status == 1">
        <div class="successview">
          <div class="left lefsuccess">{{infoData.crowdfund_diy_name}}成功</div>
          <div class="right" @click="toActive">我要报名</div>
        </div>
      </template>
    </div>
    <van-popup v-model="allUserShow" closeable round position="bottom" :style="{ height: '60%' }">
      <van-nav-bar title="全部报名人员"></van-nav-bar>
      <div class="userList allUserList" v-if="infoData.joined_member">
        <div class="lis" v-for="(item, index) in infoData.joined_member" :key="index">
          <template>
            <img :src="item.avatar_image" alt="" />
            <div class="name">{{ item.nickname }}</div>
          </template>
        </div>
      </div>
      <!-- <div class="allUserListMore" v-if="allUserShowList.last_page > allUserpage" @click="allUserShowTap(true)">加载更多</div> -->
    </van-popup>
    <van-popup v-model="payShow" round position="bottom" :style="{ height: '30%' }">
      <van-nav-bar title="请选择支持金额">
        <template #left>
          <span @click="payShow = false" class="popupClose_left">取消</span>
        </template>
        <template #right>
          <span @click="allUserComfirm">确认</span>
        </template>
      </van-nav-bar>
      <div class="payBox">
        <div class="paylis" :class="priceIndex == index ? 'paylisSelectColor' : ''" @click="tapPriceSelect(item, index)" v-for="(item, index) in payPrice" :key="index">{{ item }}元</div>
        <div class="paylis lastpaylis">
          <input type="number" v-model="diyPayprice" placeholder="自定义金额" @input="tapPayShowInp" />
        </div>
      </div>
    </van-popup>
    <!-- 海报 -->
    <yz-goodsposter v-model="posterShow" :posterData="poster_Data" :defaultImg="poster" :width="`18.875rem`" v-on:finish="uploadImageM"></yz-goodsposter>
    <!-- 海报 end -->
  </div>
</template>
<script>
import yzGoodsposter from "components/ui_components/yz_goodsPoster";
import swiperImg from "./children/swipe.vue";
import { Toast } from "vant";
export default {
  data() {
    return {
      payShow: false,
      allUserShow: false,
      infoData: [],
      // 全部报名人员
      allUserShowList: [],
      allUserpage: 1,
      // 支持的固定金额
      payPrice: [],
      diyPayprice: "",
      priceIndex: null,
      // 海报
      posterShow: false,
      poster_Data: {
        poster_data: null,
        background: {}
      },
      nowtime: new Date().valueOf(),
      poster_id: null, //海报id
      isNewPosterPlugin: false //是否为新海报
    };
  },
  activated() {
    console.log(this.$route.params.id, "params");
    this.init();
    this.getData();
  },
  computed: {
    sliceTitleStart(){
      return this.infoData.belongs_to_activity.title.slice(0,4)
    },
    sliceTitleEnd(){
      return this.infoData.belongs_to_activity.title.slice(4,this.infoData.belongs_to_activity.title.length)
    },
  },
  methods: {
    init() {
      this.posterShow = false;
      this.payShow = false;
      this.allUserShow = false;
    },
    toHome() {
      this.$router.push(this.fun.getUrl("home", {}));
    },
    shareMethods() {
      this.$dialog.alert({ message: "请点击右上角分享！" });
    },
    toActive() {
      this.$router.push(this.fun.getUrl("crowd_activity_good", { id: this.infoData.activity_id }));
    },
    uploadImageM(e) {
      let that = this;
      let posterId = this.infoData.belongs_to_activity.new_poster_id;
      this.dataURL = e;
      let uploadImage = this.fun.getRealUrl("member.qrcode.uploadLocal", { local_upload: 1, poster_id: posterId, is_new: this.isNewPosterPlugin ? 1 : 0 });
      let fd = new FormData();
      fd.append("file", this.dataURItoBlob(this.dataURL));
      axios
        .post(uploadImage, fd, {
          headers: { "Content-Type": "multipart/form-data" }
        })
        .then(response => {
          if (response.data.result == 1) {
            $http
              .post("member.qrcode.poster-record", { poster_id: posterId, image: response.data.data.img_url, is_new: this.isNewPosterPlugin ? 1 : 0 })
              .then(response => {
                if (response.result === 1) {
                  console.log("添加海报生成记录成功");
                } else {
                  Toast(response.msg);
                }
              })
              .catch(error => {
                console.log(error);
              });
          } else {
            Toast(response.data.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    dataURItoBlob(dataURI) {
      // 图片转成Buffer---------------------------------
      var byteString = atob(dataURI.split(",")[1]);
      var mimeString = dataURI
        .split(",")[0]
        .split(":")[1]
        .split(";")[0];
      var ab = new ArrayBuffer(byteString.length);
      var ia = new Uint8Array(ab);
      for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
      }
      return new Blob([ab], { type: mimeString });
    },
    postImgUrl(posterId) {
      $http
        .get("plugin.crowdfunding.frontend.activity-member.promotePoster", { new_poster_id: posterId, activity_member_id: this.infoData.id }, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.poster_Data.poster_data = response.data.style_data;
            this.poster_Data.background.src = response.data.background.src;
            this.poster_Data.background.type = response.data.background.type;
            this.isNewPosterPlugin = response.data.new;
            this.posterShow = true;
          } else {
            this.$dialog.alert({ message: response.msg });
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    async posterShowTap() {
      let posterId = this.infoData.belongs_to_activity.new_poster_id;
      await this.postImgUrl(posterId);
    },
    allUserComfirm() {
      // 支持金额弹窗确认
      let price = "";
      if (this.priceIndex == 0 || this.priceIndex) {
        price = this.payPrice[this.priceIndex];
      } else {
        price = this.diyPayprice;
      }
      $http
        .get("plugin.crowdfunding.frontend.pre-activity-order.crowdfunding", { activity_member_id: this.infoData.id, amount: price }, "加载中")
        .then(response => {
          if (response.result === 1) {
            this.$router.push(this.fun.getUrl("crowd_activity_OrderPay", { sn: response.data.order_sn }));
            this.payShow = false;
          } else {
            this.$dialog.alert({ message: response.msg });
            this.payShow = false;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    tapPayShowInp() {
      // 点击自定义金额
      this.priceIndex = null;
    },
    tapPriceSelect(item, index) {
      this.PaypriceOnece = item;
      this.priceIndex = index;
    },
    payShowTap() {
      this.payShow = true;
      this.payPrice = [];
      this.diyPayprice = "";
      this.priceIndex = null;
      $http
        .get("plugin.crowdfunding.frontend.activity.fixedAmount", {}, "加载中")
        .then(response => {
          if (response.result === 1) {
            console.log(response.data, "dddddddddd");
            this.payPrice = response.data;
            if (response.data.length > 0) {
              this.priceIndex = 0;
            }
          } else {
            Toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    strSliceFirst(str) {
      return str.slice(0, 7);
    },
    strSliceLast(str) {
      return str.slice(7, 14);
    },
    getData() {
      $http
        .get("plugin.crowdfunding.frontend.activity-member.show", { activity_member_id: this.$route.params.id }, "加载中")
        .then(response => {
          if (response.result === 1) {
            console.log(response.data, "dddddddddd");
            this.infoData = response.data;
            this.fun.setWXTitle(this.infoData.belongs_to_activity.title);
          } else {
            Toast(res.msg);
          }
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  components: {
    yzGoodsposter,
    swiperImg
  }
};
</script>
<style lang="scss" scoped>
#funding {
  background: #ffdfc4;
  min-height: 100vh;

  .userList {
    display: flex;
    flex-wrap: wrap;
    padding: 0.9rem 0 0 0;

    .lis {
      width: 20%;
      margin-bottom: 1.0625rem;

      img {
        width: 1.875rem;
        height: 1.875rem;
      }

      .name {
        font-size: 0.625rem;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .lis:nth-child(n + 5) {
      margin-bottom: 0;
    }
  }

  .allUserList {
    overflow-y: scroll;

    .lis {
      margin-bottom: 1.0625rem !important;
    }
  }

  .popupClose_left {
    color: #aaaab3;
  }

  .posterBox {
    border-radius: 0.3125rem;
    width: 17.5rem;
    height: 23.4375rem;
    background: #fff;
  }

  .posterClose {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;

    img {
      width: 1.7813rem;
      height: 1.7813rem;
    }
  }

  .payBox {
    padding: 1.5938rem;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .paylis {
      background: #f0f0f1;
      border-radius: 0.1875rem;
      padding: 0.5313rem 0.9375rem;
      font-size: 0.875rem;
      color: #6e6e79;
      margin-right: 0.875rem;
      margin-bottom: 0.625rem;

      input {
        width: 4.4rem;
        height: 100%;
        border: none;
      }
    }

    .lastpaylis {
      margin-right: 0;
      margin-bottom: 0.625rem;
    }

    .paylisSelectColor {
      color: #f14e4e;
    }
  }

  .btn {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3.125rem;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: space-around;
    overflow: hidden;
    box-sizing: border-box;

    .homeBtn {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 1.25rem;
    }

    .viewbtn {
      text-align: center;
      line-height: 2.5rem;
      font-size: 0.9375rem;
      font-weight: bold;
      color: #fff;
      padding: 0 2.5rem;
      height: 2.5rem;
      background: linear-gradient(90deg, #f47000, #f25301);
      box-shadow: 0 0.0938rem 0.2813rem 0 rgba(129, 50, 0, 0.06), 0 0.2188rem 0.4688rem 0 rgba(253, 237, 160, 0.2), 0 -0.125rem 0.375rem 0 rgba(176, 75, 1, 0.56);
      border-radius: 1.25rem;
    }

    .finish {
      text-align: center;
      line-height: 2.5rem;
      font-size: 0.9375rem;
      font-weight: bold;
      color: #6b6b6b;
      width: 20rem;
      height: 2.5rem;
      background: #dcdcdc;
      border-radius: 1.25rem;
    }

    .failview,
    .successview {
      display: flex;
      justify-content: center;
      align-items: center;

      .left {
        width: 9.375rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        background: #dcdcdc;
        border-radius: 1.25rem;
        font-size: 0.9375rem;
        font-weight: bold;
        color: #6b6b6b;
        margin-right: 1.5625rem;

        img {
          width: 100%;
          height: 100%;
          border-radius: 1.25rem;
        }
      }

      .right {
        width: 9.375rem;
        height: 2.5rem;
        line-height: 2.5rem;
        text-align: center;
        background: linear-gradient(90deg, #f47000, #f25301);
        box-shadow: 0 0.0938rem 0.2813rem 0 rgba(129, 50, 0, 0.06), 0 0.2188rem 0.4688rem 0 rgba(253, 237, 160, 0.2), 0 -0.125rem 0.375rem 0 rgba(176, 75, 1, 0.56);
        border-radius: 1.25rem;
        font-size: 0.9375rem;
        font-weight: bold;
        color: #fff;
      }
    }
  }

  .contenbox {
    padding: 0 0.625rem;
    padding-bottom: 4.125rem;

    .applyUser_title {
      position: relative;
      font-size: 0.75rem;
      color: #f00;
      font-weight: 400;
    }

    .applyUser_title::before {
      position: absolute;
      content: "";
      right: 68%;
      top: 0.5rem;
      width: 2.1875rem;
      height: 0.0313rem;
      background: #f00;
      opacity: 0.2;
    }

    .applyUser_title::after {
      position: absolute;
      content: "";
      left: 68%;
      top: 0.5rem;
      width: 2.1875rem;
      height: 0.0313rem;
      background: #f00;
      opacity: 0.2;
    }

    .videoDetail {
      margin-top: 0.625rem;
      background: #fff;
      border-radius: 0.3125rem;
      padding: 0.9063rem;

      .videoHtml {
        margin-top: 0.9375rem;

        video {
          width: 100%;
          height: 100%;
        }
      }
    }

    .friendBox {
      margin-top: 0.625rem;
      background: #fff;
      border-radius: 0.3125rem;
      padding: 0.9063rem 0.6875rem;

      .friend_user:last-child {
        margin-top: 0.2813rem;
        border-bottom: none;
      }

      .friend_user {
        padding: 0.9063rem 0 0 0;
        display: flex;
        border-bottom: solid 0.0313rem #efefef;

        .left {
          width: 1.875rem;
          height: 1.875rem;
          border-radius: 100%;
          flex-shrink: 0;
          margin-right: 0.4063rem;

          img {
            width: 100%;
            height: 100%;
            border-radius: 100%;
          }
        }

        .rigth {
          width: 100%;
          display: flex;
          flex-direction: column;
          padding-bottom: 0.9375rem;
          overflow: hidden;

          .right_top {
            display: flex;
            justify-content: space-between;
            margin-bottom: 0.4688rem;
            width: 100%;
            overflow: hidden;

            .name {
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #2b2b2b;
              font-size: 0.8125rem;
              text-align: left;
            }

            .price {
              font-size: 0.625rem;
              font-weight: 400;
              color: #f00;
              flex-shrink: 0;
            }
          }

          .right_conten {
            text-align: left;
            font-size: 0.6875rem;
            font-weight: 400;
            color: #666;
            margin-bottom: 0.625rem;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
          }

          .right_time {
            text-align: left;
            font-size: 0.625rem;
            color: #999;
          }
        }
      }
    }

    .applyUser {
      margin-top: 0.625rem;
      max-height: 12.1875rem;
      background: #fff;
      border-radius: 0.3125rem;
      padding: 0.9063rem;

      .showMore {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        font-size: 0.625rem;
        color: #2b2b2b;
        line-height: 1.25rem;
        opacity: 0.6;
        margin-top: 0.575rem;
      }

      .applyUser_title {
        position: relative;
        font-size: 0.75rem;
        color: #f00;
        font-weight: 400;
      }

      .applyUser_title::before {
        position: absolute;
        content: "";
        right: 68%;
        top: 0.5rem;
        width: 2.1875rem;
        height: 0.0313rem;
        background: #f00;
        opacity: 0.2;
      }

      .applyUser_title::after {
        position: absolute;
        content: "";
        left: 68%;
        top: 0.5rem;
        width: 2.1875rem;
        height: 0.0313rem;
        background: #f00;
        opacity: 0.2;
      }
    }

    .priceBox {
      margin-top: 0.625rem;
      padding: 0.9375rem;
      height: 6.4063rem;
      background: #fff;
      border-radius: 0.3125rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      position: relative;

      .posview {
        position: absolute;
        bottom: 0;
        right: 0;
        width: 4rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .dBox {
        width: 5.8125rem;
        height: 4.625rem;
        background-repeat: no-repeat;
        background-size: cover;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .price {
          flex: 1;
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          align-items: center;
          font-size: 0.625rem;
          font-weight: bold;
          color: #fff;
          width: 5rem;
          margin: 0 auto;

          .one {
            line-height: 0.625rem;
          }
        }

        .txt {
          flex-shrink: 0;
          height: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          font-weight: 500;
          font-size: 0.625rem;
          color: #fff;
          opacity: 0.8;
        }
      }

      .dBoxOne {
        background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcrowd_activity_good_icons1.png");
      }

      .dBoxTwo {
        background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcrowd_activity_good_icons2.png");
      }

      .dBoxThr {
        background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/images%2Fcrowd_activity_good_icons3.png");
      }
    }

    .activityGood {
      // height: 4.6875rem;
      background: #fff;
      border-radius: 0.3125rem;
      padding: 0.625rem;
      box-sizing: border-box;
      margin-top: 0.5rem;

      .title {
        color: #2b2b2b;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-align: left;
      }
      // .activityGood_right {
      //   text-align: left;
      //   flex: 1;
      //   display: flex;
      //   flex-direction: column;
      //   justify-content: space-between;
      //   .title {
      //     display: -webkit-box;
      //     -webkit-box-orient: vertical;
      //     -webkit-line-clamp: 2;
      //     overflow: hidden;
      //     text-align: left;
      //     font-size: 0.75rem;
      //     color: #2b2b2b;
      //   }
      //   .price {
      //     font-size: 0.625rem;
      //     color: #ff0000;
      //   }
      // }
      // .activityGood_img {
      //   flex-shrink: 0;
      //   margin-right: 0.4063rem;
      //   width: 3.4375rem;
      //   height: 3.4375rem;
      //   border-radius: 0.125rem;
      //   img {
      //     width: 100%;
      //     height: 100%;
      //     border-radius: 0.125rem;
      //   }
      // }
    }
  }

  .topuser {
    padding: 1.25rem 0.9375rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .topuser_left {
      flex: 1;
      display: flex;
      align-items: center;

      .image {
        width: 2.5rem;
        height: 2.5rem;
        margin-right: 0.4063rem;
        background: #ffdfc4;
        border-radius: 100%;

        img {
          width: 100%;
          height: 100%;
          border-radius: 100%;
        }
      }

      .user {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .name {
          font-size: 0.875rem;
          font-weight: 500;
          color: #2e2e2e;
          margin-bottom: 0.5938rem;
        }

        .introduce {
          font-size: 0.75rem;
          font-weight: 400;
          color: #2e2e2e;
          opacity: 0.8;
          text-align: left;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
      }
    }

    .topuser_right {
      flex-shrink: 0;
      width: 1.4375rem;
      height: 1.4375rem;
      background: #ffecdc;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 0.8438rem;
        height: 0.6563rem;
      }
    }
  }
}

.allUserListMore {
  padding-bottom: 1rem;
  color: #999;
  text-align: center;
}

.rightPrice_time {
  display: flex;
  font-size: 0.625rem;
  font-weight: bold;
  color: #f00;
}

.activityPrice {
  border-top: 0.0313rem solid #ddd;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.activityPrice_lis {
  flex: 1;
  text-align: center;
  padding-top: 1.0313rem;
  padding-bottom: 0.4375rem;
}

.activityPrice_lis .price {
  font-size: 0.625rem;
  font-weight: bold;
  color: #ff0000;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.activityPrice_lis span {
  font-size: 0.75rem;
  color: #6E6E6E;
}

.timeCount {
  font-size: 0.625rem;
  font-weight: bold;
  color: #ff0000;
  margin-top: 0.5rem;
  margin-bottom: 0.5625rem;
}

.lefsuccess {
  background: linear-gradient(90deg, #f9c500, #f8c400) !important;
  box-shadow: 0 0.0938rem 0.2813rem 0 rgba(129, 50, 0, 0.06), 0 0.2188rem 0.4688rem 0 rgba(253, 237, 160, 0.2), 0 -0.125rem 0.375rem 0 rgba(243, 39, 0, 0.56) !important;
  color: #be4000 !important;
}
</style>
